<template>
  <div class="details">
    <Card>
      <Divider>基本信息</Divider>
      <Row class="more">
        <Col :span="6"><b>姓名：</b> <span>{{member.realname}}</span> </Col>
        <Col :span="6"><b>手机号：</b> {{member.phone}}</Col>
        <Col :span="6"><b>性别：</b> {{member.sex ? '男':'女'}}</Col>
        <Col :span="6"><b>出生日期：</b> {{member.birthday | filterTime}} ({{member.birthday | filterAges}}岁)</Col>
        <Col :span="6"><b>身高：</b> <span>{{member.bodyHeight}}CM</span></Col>
        <Col :span="6"><b>体重：</b> <span>{{member.weight}}KG</span></Col>
        <Col :span="6"><b>职业：</b> <span>{{member.occupation}}</span></Col>
        <Col :span="6"><b>工作地点：</b> <span>{{member.workAddress}}</span></Col>
        <Col :span="6"><b>住址：</b> <span>{{member.homeAddress}}</span></Col>
      </Row>
      <Row class="more">
        <Col :span="12"><b>备注：</b> <span>{{member.remarks}}</span></Col>
      </Row>
      <Divider>消费总额</Divider>
      <Row class="more">
        <p style="font-size: 30px; text-align: center;">{{member.total}}元</p>
      </Row>
      <Divider>持有会员卡:</Divider>
      <Row :gutter="16">
        <i-col span="6"
               v-for="(item, index) in expenseColumns"
               :key="index">
          <Card class="expenseCard">
            <p slot="title">{{item.cardName}}</p>
            <div slot="extra">
              <Tag v-if="item.state"
                   type="border"
                   color="green">激活</Tag>
              <Tag v-else
                   type="border"
                   color="red">未激活</Tag>
            </div>

            <p><span>卡id: </span>{{item.id}}</p>
            <p><span>发卡馆: </span>{{item.storeName}}</p>
            <p><span>卡余额: </span>{{item.balance }} {{item.cardType | cardTypeUt}}</p>
            <p><span>发卡时间: </span>{{item.sendTime | filterTime}}</p>
            <p><span>激活时间: </span>{{item.startTime | filterTime}}</p>
            <p><span>到期时间: </span>{{item.endTime | filterTime}}</p>
          </Card>
        </i-col>
      </Row>
      <Spin size="large"
            fix
            v-if="spinShow"></Spin>
    </Card>
  </div>
</template>

<script>
import { getByPhone } from '@/api/user'
import { mapMutations } from 'vuex'
import { formatDateTime } from '@/libs/util'
import { memberCardList } from '@/api/card'

function ages (str) {
  var birthday = new Date(str.replace(/-/g, '\/'))
  var d = new Date()
  var age = d.getFullYear() - birthday.getFullYear() - ((d.getMonth() < birthday.getMonth() || d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate()) ? 1 : 0)
  return age
}
export default {
  name: 'query',
  props: {
    storeIdList: {
      type: [Array],
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      spinShow: true,
      member: {},
      expenseColumns: []
    }
  },
  filters: {
    filterTime (time) {
      return formatDateTime(time)
    },
    filterAges (time) {
      time = formatDateTime(time)
      return ages(time)
    },
    cardTypeUt (val) {
      switch (val) {
        case 1:
          return '天'
        case 2:
          return '次'

        case 3:
          return '元'
      }
    }
  },
  created () {
    this.memberCardList()
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    close () {
      this.$router.back(-1)
    },
    getByPhone (phone) {
      this.spinShow = true
      getByPhone(phone).then(res => {
        this.member = res.data
        this.spinShow = false
      }).catch(() => {
      })
    },
    memberCardList () {
      memberCardList({
        member: this.member.phone
      }).then(res => {
        this.expenseColumns = res.data.records
      })
    },
    ages (str) {
      var birthday = new Date(str.replace(/-/g, '\/'))
      var d = new Date()
      var age = d.getFullYear() - birthday.getFullYear() - ((d.getMonth() < birthday.getMonth() || d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate()) ? 1 : 0)
      return age
    }
  }
}
</script>

<style lang="less">
.details {
  .more {
    margin-bottom: 20px;
  }
  .coinId {
    display: flex;
    align-items: center;
    &-img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
}
.expenseCard {
  margin-bottom: 20px;
  span {
    font-weight: 500;
  }
}
</style>
